import { Card, Row, Col, Button, Table, Space, Upload, message, List } from 'antd';
import { UploadOutlined, CameraOutlined, PlusOutlined, DownloadOutlined } from '@ant-design/icons';
import { useState } from 'react';

const DietRecords = () => {
  const [fileList, setFileList] = useState([]);

  // 模拟饮食记录数据
  const dietData = [
    { 
      id: 1, 
      patient: '张三', 
      time: '2025-10-31 12:30', 
      foods: ['米饭', '红烧肉', '青菜'], 
      calories: 650,
      nutrients: { protein: 25, fat: 30, carbs: 70 }
    },
    { 
      id: 2, 
      patient: '李四', 
      time: '2025-10-31 18:45', 
      foods: ['面条', '鸡蛋', '西红柿'], 
      calories: 420,
      nutrients: { protein: 18, fat: 12, carbs: 60 }
    },
  ];

  const columns = [
    { title: '患者', dataIndex: 'patient' },
    { title: '记录时间', dataIndex: 'time' },
    { 
      title: '食物', 
      dataIndex: 'foods',
      render: foods => foods.join(', ')
    },
    { title: '热量(kcal)', dataIndex: 'calories' },
    {
      title: '营养成分',
      render: (_, record) => (
        <span>
          蛋白质:{record.nutrients.protein}g 
          脂肪:{record.nutrients.fat}g 
          碳水:{record.nutrients.carbs}g
        </span>
      )
    },
    {
      title: '操作',
      render: (_, record) => (
        <Space>
          <Button type="link" size="small">详情</Button>
          <Button type="link" size="small">编辑</Button>
        </Space>
      ),
    },
  ];

  const handleUpload = ({ file, fileList }) => {
    setFileList(fileList);
    if (file.status === 'done') {
      message.success(`${file.name} 文件上传成功`);
    } else if (file.status === 'error') {
      message.error(`${file.name} 文件上传失败`);
    }
  };

  const handleManualAdd = () => {
    message.info('跳转到手动添加页面');
  };

  const handleAIRecognition = () => {
    message.info('跳转到AI识别页面');
  };

  return (
    <div>
      <h2>饮食记录</h2>
      
      {/* 功能按钮 */}
      <Card style={{ marginBottom: 24 }}>
        <Space>
          <Button type="primary" icon={<CameraOutlined />} onClick={handleAIRecognition}>
            AI食物识别
          </Button>
          <Button icon={<PlusOutlined />} onClick={handleManualAdd}>
            手动录入
          </Button>
          <Upload
            fileList={fileList}
            onChange={handleUpload}
            showUploadList={false}
          >
            <Button icon={<UploadOutlined />}>上传图片</Button>
          </Upload>
          <Button icon={<DownloadOutlined />}>导出记录</Button>
        </Space>
      </Card>

      {/* 食物识别结果展示 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        <Col span={8}>
          <Card title="识别结果示例">
            <div style={{ textAlign: 'center', marginBottom: 16 }}>
              <div style={{ 
                width: 150, 
                height: 150, 
                backgroundColor: '#f0f2f5', 
                margin: '0 auto',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 8
              }}>
                食物图片
              </div>
            </div>
            <List
              dataSource={['米饭', '红烧肉', '青菜']}
              renderItem={item => (
                <List.Item>
                  <List.Item.Meta
                    title={item}
                    description="热量: 200kcal | 蛋白质: 5g | 脂肪: 8g | 碳水: 25g"
                  />
                </List.Item>
              )}
            />
          </Card>
        </Col>
        <Col span={16}>
          <Card title="营养分析">
            <div style={{ height: 300, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <div>营养成分分析图表 (饼图/柱状图)</div>
            </div>
          </Card>
        </Col>
      </Row>

      {/* 饮食记录表格 */}
      <Card title="饮食记录">
        <Table 
          dataSource={dietData} 
          columns={columns} 
          rowKey="id" 
          pagination={{ pageSize: 10 }}
        />
      </Card>
    </div>
  );
};

export default DietRecords;
